<template>
	<view class="address_list">
		<view class="address_tip" v-if="addressList && addressList.length">默认地址</view>
		<radio-group @change="changeDefault">
			<u-swipe-action>
				<u-swipe-action-item v-for="item in addressList" :key="item.id" :index="item.id" :options="options" @click="deleteAddress(item.id)">
					<view class="address_info">
						<u-avatar :text="item.consignee.slice(0,1)" size="100rpx" font-size="40rpx"></u-avatar>
						<view class="address_info_main" @click="changeAddress(item)">
							<p class="address_info_name">{{item.consignee}}<span
									class="address_info_phone">{{item.phone}}</span></h4>
							<p class="address_info_address">{{item.location}}</p>
						</view>
						<radio :checked="!!item.isDefault" :value="item.id" color="#ff673d"></radio>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</radio-group>
		<button class="btn" @click="addAddress">
			<span>添加地址</span>
		</button>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from "vuex"
	import {delUserAddress,setDefaultUserAddress} from "apis/farmer/address.js"
	export default {
		name: "AddressList",
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#ff5733'
					}
				}]
			}
		},
		computed: {
			...mapState({
				addressList: state => state.addressStore.addressList
			}),
		},
		methods: {
			...mapMutations(["removeAddress","setDefaultAddress"]),
			async changeDefault(event) {
				const { value } = event.target
				const {code, msg} = await setDefaultUserAddress(value)
				if(code !== 200) return this.$errorMsg(msg)
				this.setDefaultAddress(value)
				const addressInfo = this.addressList.filter(item => item.id === value)[0]
				addressInfo.isDefault = 1
				
			},
			changeAddress(param) {
				this.pushNewPage("addressInfo", param)
			},
			addAddress() {
				this.pushNewPage("addressInfo")
			},
			async deleteAddress(id){
				const {code,msg} = await delUserAddress(id)
				if(code !== 200) return this.$errorMsg(msg)
				this.removeAddress(id)
				this.$successMsg("删除成功")
			}
		},
		onLoad() {
			this.$store.dispatch("loadAddress")
		}
	}
</script>

<style lang="scss" scpoed>
	.address_list {
		width: 94vw;
		margin: 20rpx 3vw;
		height: calc(100vh - 80rpx);
		overflow: auto;

		.address_tip {
			text-align: right;
			box-sizing: border-box;
			padding: 0 8rpx;
			font-size: 28rpx;
			color: #636363;
			font-weight: bold;
			margin: 20rpx 0;
		}

		.btn {
			width: 100%;
			height: 80rpx;
			background-color: rgba(255, 87, 51, 1);
			margin-top: 20rpx;
			box-sizing: border-box;
			color: #FFFFFF;
			font-size: 36rpx;
			line-height: 80rpx;
			border-radius: 10rpx;
		}

		.address_info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #f4f4f4;
			box-sizing: border-box;
			border-bottom: 1rpx solid #d9d9d9;
			padding: 10rpx 20rpx;
			// border-radius: 10rpx;
			min-height: 140rpx;

			.address_info_main {
				flex: 1;
			}

			.address_info_name {
				font-size: 34rpx;
				color: #2d2d2d;
				font-weight: bold;
				margin: 0 30rpx;
			}

			.address_info_phone {
				font-size: 30rpx;
				color: #4f4f4f;
				font-weight: bold;
			}

			.address_info_address {
				font-size: 28rpx;
				color: #505050;
				margin: 0 30rpx;
			}
		}
	}
</style>
